<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>生命周期</title>
</head>
<body>
  <div id="root">
    <h2>引出生命周期</h2>
    <hr>
    <div >{{number}}</div>
    <button @click="number++">n++</button>
    <button @click="unMounted">销毁组件</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false 
    const x= new Vue({
      el:'#root', 
      data:{ 
        number:1
      },
      methods: {
        unMounted() {
          this.$destroy()
        }
      },
      beforeCreate() {
        console.log('将要初始化vue实例');
      },
      created() {
        console.log('vue实例初始化完毕');
      },
      beforeMount() {
        console.log(' 组件将要被挂载（dom未被编译）');
      },
      mounted() {
        console.log(' 组件挂载完毕（dom编译完成）');
      },
      beforeUpdate(a) {
        console.log('###',a,this);
        console.log('  组件将要更新（页面未更新，页面数据不同步）');
      },
      updated() {
        console.log('  组件更新完毕（页面与数据同步）');
      },
      destroyed() {
        console.log('   组件卸载完毕')
      },
      beforeDestroy() {
        console.log('   组件卸载准备（data vm methods、指令处于可用阶段）')
      },
    })
  </script>
</body>
</html>